<template>
  <el-card shadow="always" class="usingHelp">
    <el-form :model="form">
      <div>
        <div style="margin: 20px 0px 0px 20px"><h3>使用帮助</h3></div>
        <div class="box">
          <h4>
            一、标签管理
          </h4>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;标签管理模块主要用于管理与算子对应的标签。通过该模块，可以执行对标签的增加、删除、修改和查询操作。
          这使得设计人员能够灵活地为不同的算子分配特定的标签，以便更好地组织和识别各种算子。
          例如，当需要查找具有特定功能或属性的算子时，可以通过标签快速筛选。
          <el-divider></el-divider>
          <h4>
            二、算子管理
          </h4>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;算子管理模块负责管理在数据格式转换过程中所用到的算子。
          该模块支持对算子进行全面的增删改查操作。
          用户可以添加新的算子以满足不同的数据转换需求，删除不再使用的算子以优化系统资源，修改现有算子的参数或属性以适应变化的业务场景，
          以及查询特定算子的详细信息以便在数据转换过程中进行合理选择和配置。
          <el-divider></el-divider>
          <h4>
            三、描述文件管理
          </h4>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;描述文件管理模块主要用于管理来源协议和目标协议信息。
          用户可以通过该模块对协议信息进行增加、删除、修改和查询操作。
          这有助于清晰地定义数据的来源和目标格式，确保数据在不同系统或平台之间的准确转换。
          通过管理描述文件，用户可以更好地理解和掌握数据转换的上下文，提高数据转换的效率和准确性。
          <el-divider></el-divider>
          <h4>
            四、转换规则文件
          </h4>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;转换规则文件管理模块专注于管理数据转换的规则。
          用户可以对规则进行增加、删除、修改和查询操作。
          转换规则决定了如何将数据从一种格式转换为另一种格式，包括数据字段的映射、数据类型的转换。通过有效的规则管理，用户可以定制化数据转换过程，满足不同业务场景下的特定需求。
          <el-divider></el-divider>
          <h4>
            五、文件导入
          </h4>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;文件导入功能允许用户配置来源协议和目标协议，以及选择相应的转换规则。
          基于这些配置，系统能够生成对应的转换 jar 包。
          这个过程简化了数据转换的部署和执行，用户只需进行一次配置，即可生成可重复使用的转换工具。
          通过文件导入，用户可以快速实现数据在不同协议之间的转换，提高数据处理的效率和灵活性。
        </div>
<!--        <div class="helpbox">-->
<!--          <div>-->
<!--            <p>软件使用方式</p>-->
<!--            <el-card shadow="hover" style="width: 35vw">-->
<!--              <div>-->
<!--                &lt;!&ndash; {{ form.chm1Path }} &ndash;&gt;-->
<!--                <img-->
<!--                  :src="'file:/' + form.chm1Path"-->
<!--                  alt="Image1"-->
<!--                  style="max-width: 100%; max-height: 100%" />-->
<!--              </div>-->
<!--            </el-card>-->
<!--          </div>-->
<!--          <div>-->
<!--            <p>故障问题解释</p>-->
<!--            <el-card shadow="hover" style="width: 35vw">-->
<!--              <div>-->
<!--                &lt;!&ndash; {{ form.chm2Path }} &ndash;&gt;-->
<!--                <img-->
<!--                  :src="'file:/' + form.chm2Path"-->
<!--                  alt="Image2"-->
<!--                  style="max-width: 100%; max-height: 100%" />-->
<!--              </div>-->
<!--            </el-card>-->
<!--          </div>-->
<!--        </div>-->
      </div>
    </el-form>
  </el-card>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          //使用帮助1
          chm1Path: null,
          //使用帮助2
          chm2Path: null,
        },
      };
    },
    created() {
      this.init();
    },
    methods: {
      init() {
        const result = window.iConfig.getAll();
        let res = JSON.parse(result);
        const arr = res.data;
        console.log("🚀 ~ test1 ~ data:", arr);
        const resultObject = {};
        for (let i = 0; i < arr.length; i++) {
          const item = arr[i];
          resultObject[item.key] = item.value;
        }
        this.form = resultObject;
        console.log("🚀 ~ init ~ resultObject:", resultObject);
      },
    },
  };
</script>

<style scoped>
  .usingHelp {
    width: 100%;
    height: 98%;
  }
  .helpbox {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
  .box{
    margin-left: 50px;
    margin-right: 50px;
    margin-bottom: 50px;
  }
</style>
